<script>
import { mapActions, mapState } from 'vuex'
import AppBar from '@/components/AppBar'
import FolderList from '@/components/FolderList'
import ConversationImport from '@/components/ConversationImport'
import ConversationFilterList from '@/components/ConversationFilterList'
import AppFooter from '@/components/AppFooter'

export default {
  name: 'App',
  components: {
    AppFooter,
    ConversationFilterList,
    AppBar,
    FolderList,
    ConversationImport,
  },
  data() {
    return {
      folderEditDialog: false,
      snackbar: true,
    }
  },
  methods: {
    ...mapActions([
      'initializeStore',
    ]),
  },
  computed: {
    ...mapState({
      isImport: state => state.system.isImport,
      alert: state => state.alert,
      filter: state => state.filter,
    }),
    showPanel() {
      // 如果有过滤条件，就显示过滤列表
      if (this.filter.search) {
        return 'conversation-filter'
      }

      return this.isImport ? 'conversation-list' : 'conversation-import'
    },
  },
  created() {
    // 从chrome存储中获取数据
    this.initializeStore()
  },
  mounted() {
    chrome.runtime.connect({ name: 'popup' })

    // 监听来自background的消息
    chrome.runtime.onMessage.addListener(request => {
      const { action, params, target } = request

      if (target !== 'popup') {
        return
      }

      if (action === 'updateQueueStatus') {
        this.$store.commit('sync/SET_QUEUE', params)
      }
    })
  },
  beforeUnmount() {
    chrome.runtime.onMessage.removeListener(this.messageListener)
  },
}
</script>

<template>
  <v-layout>
    <AppBar/>
    <v-main>
      <v-container>
          <FolderList v-if="showPanel === 'conversation-list'"/>
          <ConversationImport v-else-if="showPanel === 'conversation-import'"/>
          <ConversationFilterList v-else-if="showPanel === 'conversation-filter'"/>
      </v-container>
      <v-snackbar
        v-model="alert.show"
        :color="alert.color"
        transition="slide-y-transition"
      >
        {{ alert.message }}
        <template v-slot:actions>
          <v-btn
            icon="mdi-close"
            size="x-small"
            variant="plain"
            @click="alert.show = false"
          >
          </v-btn>
        </template>
      </v-snackbar>
    </v-main>
    <AppFooter/>
  </v-layout>
</template>

<style>
body, #app {
  width: 450px;
  height: 600px;
  overflow: hidden;
}

</style>
